<template>
  <div style="position: relative">
    <van-popup v-model="show" position="bottom" :close-on-click-overlay="false">
      <div class="box">
        <div class="head">
          <div @click="cancle">取消</div>
          <div @click="config">确认</div>
        </div>
        <van-checkbox-group v-model="result">
          <van-cell-group>
            <van-cell
              v-for="(item, index) in columns"
              clickable
              :key="item.rm_id"
              :title="`${item.name}`"
              @click="toggle(index)"
            >
              <template #right-icon>
                <van-checkbox :name="item" ref="checkboxes" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Checkbox, CheckboxGroup, Picker, Popup, Cell, CellGroup } from "vant";
export default {
  props: ["show", "columns"],
  data() {
    return {
      result: [],
    };
  },
  components: {
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  methods: {
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    config() {
      this.$emit("config",this.result);
      this.result = []
    },
    cancle() {
      this.$emit("cancle");
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  height: 300px;
}
.head {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  // position: fixed;
  // top: 326px;
  // z-index: 99999;
  // left: 0;
  width: 100%;
  background: #ffff;
  & div:first-child {
    margin-left: 15px;
  }
  & div:last-child {
    margin-right: 15px;
  }
}
@media (max-height: 823px) {
  .head{
     top: 451px;
  }
}
@media (max-height: 812px) {
  .head{
     top: 471px;
  }
}
@media (max-height:736px) {
  .head{
     top: 361px;
  }
}
@media (max-height:731px) {
  .head{
     top: 359px;
  }
}
@media (max-height: 667px) {
  .head{
     top:326px;
  }
}

@media (min-width:750px) {
  .box {
  height: 300px;
}
.head {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  // position: fixed;
  // top: 326px;
  // z-index: 99999;
  // left: 0;
  width: 100%;
  background: #ffff;
  & div:first-child {
    margin-left: 15px;
  }
  & div:last-child {
    margin-right: 15px;
  }
}
}
</style>